<template>
  <page title="短信记录">
    <el-row :gutter="20" class="header-title">
      <el-col :span="12">
      </el-col>
      <el-col :span="2">
        <span class="center">短信类型</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="messageType" placeholder="全部">
          <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <span class="center">收信人</span>
      </el-col>
      <el-col :span="4">
        <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
      </el-col>
    </el-row>
    <el-table :data="tableData.slice((currentPage-1)*currentSize,Math.min(currentPage*currentSize,tableData.length))" header-cell-class-name="table-header">
      <el-table-column
          prop="time"
          label="发送时间">
      </el-table-column>
      <el-table-column
          prop="type.name"
          label="短信类型">
      </el-table-column>
      <el-table-column
          prop="receiver"
          label="收信人">
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容">
        <template #default="scope">
          {{scope.row.content.length > 12 ? scope.row.content.slice(0,11)+'...' : scope.row.content}}
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template #default="scope">
          <span :style="{ color:statusMap[scope.row.status].color }">{{statusMap[scope.row.status].msg}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleLook(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="end" class="footer-pager">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 12, 14, 16]"
          :page-size="currentSize"
          layout="sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </el-row>
  </page>
</template>

<script>
import Page from "@/components/Page";
import axios from "axios";
export default {
  name: "MessageRecord",
  components: {Page},
  data(){
    return{
      tableData:[],
      statusMap:{
        1:{
          color:'rgb(103, 194, 58)',
          msg:'已发送'
        },
        2:{
          color:'rgb(230, 162, 60)',
          msg:'发送中'
        },
        3:{
          color:'rgb(245, 108, 108)',
          msg:'发送失败'
        }
      },
      types:[{
        id:1,
        name: "全部"
      }],
      currentPage: 1,
      currentSize: 8,
      messageType: '',
      searchKey:'',
    }
  },
  methods:{
    handleLook(index,row){
      this.$router.push('messageInfo?id='+row.id);
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    findAllMessageRecord(){
      return axios.get(this.$host+"/message/record").then((response)=>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllMessageType(){
      return axios.get(this.$host+"/message/type").then((response)=>{
        if(response.data.code === 0){
          this.types = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    }
  },
  created() {
    this.findAllMessageRecord();
    this.findAllMessageType();
  }
}
</script>

<style>

</style>